var myChart  = '';
var myChart_month = ''
var currClickNode = '';
var currClickNodeName='';
var currClickNodeUnit='';
var currClickNodeType='';
var option = {
    title:{
        text:"暂无数据",
        textStyle:{
            color:'#000',
            align:'center',
            fontWeight:'normal'
        },
        left: 'center',
        top:'5%'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params, ticket, callback) {
            var html='';
            try{html +=params[0].seriesName +':'+(params[0].value?params[0].value:'-') + '%' +'<br/>';}catch(err){}
            try{html+=params[1].seriesName +':'+(params[1].value?params[0].value:'-') + '%' +'<br/>';}catch(err){}
            try{html+=params[2].seriesName +':'+(params[2].value?params[0].value:'-')  +'<br/>';}catch(err){}
            try{html+=params[3].seriesName +':'+(params[3].value?params[0].value:'-')  +'<br/>';}catch(err){}
            return html;
        }
    },
    toolbox: {
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    grid: {
        show:false,
        containLabel: true
    },
    legend: {
        data: ['计划增长率','实际增长率','计划','实际'],
        bottom:'5%'
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            alignWithLabel: true,
        },
        data: ['第一季度','第二季度','第三季度','第四季度']
    }],
    yAxis: [{
        type: 'value',
        name: '增速',
        // min: 0,
        // max: 30,
        position: 'right',
        axisLabel: {
            formatter: '{value} '
        },
        axisTick: {
            show: false
        },
        splitLine:{
            show:false
        }
    }, {
        type: 'value',
        name: '总量',
        // min: 0,
        // max: 200,
        position: 'left'
    }],
    series: [{
        name: '计划增长率',
        type: 'line',
        label: {
            normal: {
                show: false,
                position: 'top'
            }
        },
        lineStyle: {
            normal: {
                color:'#FF9A5A',
                width: 3,
            }
        },
        data: [null,null,null,null]
    },{
        name: '实际增长率',
        type: 'line',
        label: {
            normal: {
                show: false,
                position: 'top',
            }
        },
        lineStyle: {
            normal: {
                color:'#8BBA00',
                width: 3,
            }
        },
        data: [null,null,null,null]
    }, {
        name: '计划',
        type: 'bar',
        yAxisIndex: 1,
        itemStyle:{
            normal:{
                color:"#AFD8F8",
                borderColor:"#AFD8F8"
            }
        },
        label: {
            normal: {
                show: false,
                position: 'top'
            }
        },
        data: [null,null,null,null]
    },{
        name: '实际',
        type: 'bar',
        yAxisIndex: 1,
        label: {
            normal: {
                show: false,
                position: 'top'
            }
        },
        itemStyle:{
            normal:{
                color:"#F7C327",
                borderColor:"#F7C327"
            }
        },
        data: [null,null,null,null]
    }]
};
var option_month = {
    title:{
        text:"暂无数据",
        textStyle:{
            color:'#000',
            align:'center',
            fontWeight:'normal'
        },
        left: 'center',
        top:'5%'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params, ticket, callback) {
            var html='';
            try{html +=params[0].seriesName +':'+(params[0].value?params[0].value:'-') + '%' +'<br/>';}catch(err){}
            try{html+=params[1].seriesName +':'+(params[1].value?params[1].value:'-') + '%' +'<br/>';}catch(err){}
            try{html+=params[2].seriesName +':'+(params[2].value?params[2].value:'-')  +'<br/>';}catch(err){}
            try{html+=params[3].seriesName +':'+(params[3].value?params[3].value:'-')  +'<br/>';}catch(err){}
            return html;
        }
    },
    toolbox: {
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    grid: {
        show:false,
        containLabel: true
    },
    legend: {
        data: ['计划增长率','实际增长率','计划','实际'],
        bottom:'5%'
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            alignWithLabel: true,
        },
        data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十-月','十二月']
    }],
    yAxis: [{
        type: 'value',
        name: '增速',
        // min: 0,
        // max: 30,
        position: 'right',
        axisLabel: {
            formatter: '{value} '
        },
        axisTick: {
            show: false
        },
        splitLine:{
            show:false
        }
    }, {
        type: 'value',
        name: '总量',
        position: 'left'
    }],
    series: [{
        name: '计划增长率',
        type: 'line',
        lineStyle: {
            color:'#FF9A5A',
            width:3
        },
        data: [null,null,null,null,null,null,null,null,null,null,null,null]
    },{
        name: '实际增长率',
        type: 'line',
        label: {
            normal: {
                show: false,
                position: 'top',
            }
        },
        lineStyle: {
            color:'#8BBA00',
            width: 3
        },
        data: [null,null,null,null,null,null,null,null,null,null,null,null]
    }, {
        name: '计划',
        type: 'bar',
        yAxisIndex: 1,
        itemStyle:{
            normal:{
                color:"#AFD8F8",
                borderColor:"#AFD8F8"
            }
        },
        label: {
            normal: {
                show: false,
                position: 'top'
            }
        },
        data: [null,null,null,null,null,null,null,null,null,null,null,null]
    },{
        name: '实际',
        type: 'bar',
        yAxisIndex: 1,
        label: {
            normal: {
                show: false,
                position: 'top'
            }
        },
        itemStyle:{
            normal:{
                color:"#F7C327",
                borderColor:"#F7C327"
            }
        },
        data: [null,null,null,null,null,null,null,null,null,null,null,null]
    }]
};
function renderBar(){
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('echart_bar'));
    // 指定图表的配置项和数据

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
$(document).ready(function(){
    loadyears();//加载年份
})
/*加载指标类别*/
function loadzble(name){
    SGIS.API.get("/target/getComboBox/getIndexType")
        .data({
            name:name
        })
        .json(function (re) {
            var html = '<option value="">请选择</option>';
            for(var i=0;i<re.length;i++){
                html+='"<option value="'+ re[i].id+'"'+'idenid="'+re[i].id+'">'+re[i].name + '</option>';
            }
            $("#zble_zw").html(html);
            $("#zble_zw").change(function(){
                loadzbtree();//加载指标树
            })
        })
}
/*加载责任部门*/
function loadzrbm(){
    SGIS.API.get("/target/getDep").data(
        {
            year:$('#yr_zw').val(),
            code:$('#khtx_zw option:selected')[0].getAttribute('code')
        }
    )
        .json(function (re) {
            // var html = '<option value="">请选择</option>';
            var html = ''
            for(var i=0;i<re.result.length;i++){
                html+='"<option value="'+ re.result[i]+'">'+re.result[i] + '</option>';
            }
            $("#zrbm_zw").html(html);
        })
}
/*加载指标树数据*/
function loadzbtree(){
    if(!$("#zble_zw").val()){
        return false;
    }
    SGIS.API.get("target/getIndexTreeData")
        .data({
            id:$("#zble_zw").val()
        })
        .json(function (re) {
            $('#indexsys_zbjk_treeview').treeview({
                data: re,
                backColor: '#fff',
                color:"#5bc0de",
                showBorder: false,
                showTags:false,
                levels:2,
                expandIcon:"glyphicon glyphicon-triangle-right",
                collapseIcon:"glyphicon glyphicon-triangle-bottom",
                onNodeSelected:function(event,node){
                    currClickNode = node.id;
                    currClickNodeName = node.text;
                    currClickNodeUnit=!node.unit?"": "("+node.unit+")";
                    currClickNodeType = node.type;
                    if(currClickNodeType !=='season'){
                        $("#season_zw")[0].style.display = 'none';
                        $("#month_zw")[0].style.display = 'block';
                        loadchartdata_month(node.id,currClickNodeName); //加载图表信息
                        var elements = $('#month_zw li')
                        for(var i=0;i<elements.length;i++){
                            if(i==0){
                                $(elements[0]).addClass('active')
                            }else{
                                $(elements[i]).removeClass('active')
                            }
                        }
                        loadtabledata(currClickNode,$("#yr_zw").val()+'01','#tableinfo_month',currClickNodeName)
                        $("#month_zw li a").click(function(){
                            var time = $("#yr_zw").val() + $(this)[0].getAttribute('value');
                            loadtabledata(currClickNode,time,'#tableinfo_month',currClickNodeName)
                        })
                    }else{
                        $("#season_zw")[0].style.display = 'block';
                        $("#month_zw")[0].style.display = 'none';
                        loadchartdata(node.id,currClickNodeName); //加载图表信息
                        var elements = $('#season_zw li')
                        for(var i=0;i<elements.length;i++){
                            if(i==0){
                                $(elements[0]).addClass('active')
                            }else{
                                $(elements[i]).removeClass('active')
                            }
                        }
                        loadtabledata(currClickNode,$("#yr_zw").val()+'03','#tableinfo_season',currClickNodeName)
                        $("#season_zw li a").click(function(){
                            var time = $("#yr_zw").val() + $(this)[0].getAttribute('value');
                            loadtabledata(currClickNode,time,'#tableinfo_season',currClickNodeName)
                        })
                    }
                }
            });
        })
}
function loadtabledata(ids,time,id,name){
    SGIS.API.get("/target/getIndexData")
        .data({
            // name:name,
            // year:$('#yr_zw').val(),
            code:$('#khtx_zw option:selected')[0].getAttribute('code'),
            time:time,
            diquName:$('#zrbm_zw').val(),
            id:ids
        })
        .json(function (re) {
            var html='<tr>';
            for(var i=0;i<re.result.length;i++){
                html+="<td>";
                html+=re.result[i][0] + currClickNodeUnit;
                html+="</td>"
                // html+="<td>";
                // html+=re.result[i][1];
                // html+="</td>"
                html+="<td>";
                html+=re.result[i][2]?(re.result[i][2] +'%'):'-';
                html+="</td>"
                html+="<td>";
                html+=re.result[i][3]?re.result[i][3]:'-';
                html+="</td>"
                html+="<td>";
                html+=re.result[i][4]?(re.result[i][4] +'%'):'-';
                html+="</td>"
            }
            html+='</tr>';
            $(id).html(html);
        })
}
function loadchartdata(id,name){
    SGIS.API.get("/target/getIndexData/allseason")
        .data({
            // name:name,
            diquName:$('#zrbm_zw').val(),
            year:$('#yr_zw').val(),
            code:$('#khtx_zw option:selected')[0].getAttribute('code'),
            id:id
        })
        .json(function (re) {
            option.title.text = name + currClickNodeUnit;
            var planadd = [];
            var trueadd = [];
            var plan = [];
            var treu = [];
            if(re.result.length){
                for(var i=0;i<re.result.length;i++){
                    plan.push(re.result[i][2]);
                    planadd.push(re.result[i][3]);
                    treu.push(re.result[i][4]);
                    trueadd.push(re.result[i][5]);
                }
            }else{
                plan=[null,null,null,null];
                planadd=[null,null,null,null];
                treu=[null,null,null,null];
                trueadd=[null,null,null,null];
            }
            option.series[0].data = planadd;
            option.series[1].data = trueadd;
            option.series[2].data = plan;
            option.series[3].data = treu;
            myChart.setOption(option);
            /********************其他tab页面添加*********************************/

        })
}
function loadchartdata_month(id,name){
    SGIS.API.get("/target/getIndexData/allseason")
        .data({
            // name:name,
            diquName:$('#zrbm_zw').val(),
            year:$('#yr_zw').val(),
            code:$('#khtx_zw option:selected')[0].getAttribute('code'),
            id:id
        })
        .json(function (re) {
            option_month.title.text = name + currClickNodeUnit;
            var planadd = [];
            var trueadd = [];
            var plan = [];
            var treu = [];
            var year = $("#yr_zw").val();
            try{
                for(var i=1;i<13;i++){
                    var month = i<10?('0'+i):i;
                    var time = year + month;
                    if(re.result[i-1][1] !==time){
                        re.result.splice(0,0,[0,0,0,0,0,0])
                    }
                }
                for(var key=0;key<re.result.length;key++){
                    if(!re.result[key][2]){re.result[key][2]=null};
                    if(!re.result[key][3]){re.result[key][3]=null};
                    if(!re.result[key][4]){re.result[key][4]=null};
                    if(!re.result[key][5]){re.result[key][5]=null};
                    plan.push(re.result[key][2]);
                    planadd.push(re.result[key][3]);
                    treu.push(re.result[key][4]);
                    trueadd.push(re.result[key][5]);
                }
                option_month.series[0].data = planadd;
                option_month.series[1].data = trueadd;
                option_month.series[2].data = plan;
                option_month.series[3].data = treu;
            }catch(err){
                option_month.series[0].data = [null,null,null,null,null,null,null,null,null,null,null,null];
                option_month.series[1].data = [null,null,null,null,null,null,null,null,null,null,null,null];
                option_month.series[2].data = [null,null,null,null,null,null,null,null,null,null,null,null];
                option_month.series[3].data = [null,null,null,null,null,null,null,null,null,null,null,null];
            }
            myChart.setOption(option_month);
            /********************其他tab页面添加*********************************/

        })
}
function loadyears(){
    $.ajax({
        url:'/app/target/find/years',
        type:'get',
        success:function (re) {
            var html = '';
            re = re.years;
            for(var i=0;i<re.length;i++){
                html +='<option';
                html += ' value="' + re[i] + '"';
                html +='>';
                html += re[i];
                html +='</option>';
            }
            $('#yr_zw').html(html);
            $('#yr_zw').change(function(){
                $.ajax({
                    url:'/app/target/getComboBox',
                    type:'get',
                    data:{
                        year:$('#yr_zw').val()
                    },
                    success:function(re){
                        var html = '<option value="">请选择</option>';
                        for(var i=0;i<re.length;i++){
                            html+=
                                '<option value="'
                                +re[i].name
                                +'" code="' + re[i].code+'" index="'+i+'" >'
                                +
                                re[i].name
                                +"</option>";
                        }
                        $("#khtx_zw").html(html);
                        $("#khtx_zw").change(function(){
                            loadzble($("#khtx_zw").val());
                            loadzrbm();//加载责任部门
                        })
                    }
                })
                /****切换部门默认更新数据*****/
                $('#zrbm_zw').change(function(){
                    if(!currClickNode){
                        return false;
                    }
                    var time = $("#yr_zw").val();
                    if(currClickNodeType !=='season'){
                        time +=$('#month_zw ul li.active a')[0].getAttribute('value');
                        loadtabledata(currClickNode,time,'#tableinfo_season',currClickNodeName)
                        loadchartdata_month(currClickNode,currClickNodeName)
                    }else{
                        loadtabledata(currClickNode,time,'#tableinfo_season',currClickNodeName)
                        loadchartdata(currClickNode,currClickNodeName)
                    }
                })
            })
        }
    })
}
$(window).resize(function(){
    setTimeout(function(){
        var option = myChart.getOption();
        myChart.dispose();
        myChart = echarts.init(document.getElementById('echart_bar'));
        myChart.setOption(option)
    },500);
})